import React from 'react';
import { motion } from 'framer-motion';

const Hero = () => {
  return (
    <div className="bg-gradient-to-r from-blue-900 to-indigo-900 text-white">
      <div className="container mx-auto px-6 py-20">
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center"
        >
          <h1 className="text-5xl md:text-6xl font-bold mb-8">
            FlyLaTeX
          </h1>
          <p className="text-xl md:text-2xl mb-12 text-blue-100">
            专业的在线 <i>LaTeX</i> 编辑器，所见即所得，让数学公式，论文编辑变得简单
          </p>
          <div className="flex justify-center gap-4">
            <button className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-100 transition" onClick={() => {
              window.location.href = 'https://www.flylatex.cn/project';
            }}>
              立即开始
            </button>
            <button 
              className="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition" 
              onClick={() => {
                document.getElementById('faq').scrollIntoView({ 
                  behavior: 'smooth'
                });
              }}
            >
              了解更多
            </button>
          </div>
        </motion.div>
      </div>
    </div>
  );
};

export default Hero;